<template>
  <div class="container mx-auto pt-12">
    <ContentWrap title="热门园区" sub-title="优质园区，720VR、信息全">
      <template #subtitle>
        <div class="flex justify-center relative">
          <div>优质园区，720VR、信息全</div>
          <!-- <TextTabs v-model="parkType" :options="parkOptions"></TextTabs> -->
          <div class="absolute right-0">
            <ReadMore to="/park"></ReadMore>
          </div>
        </div>
      </template>
      <template #default>
        <div class="grid grid-cols-4 gap-x-5 gap-y-5">
          <PlainCard v-for="item in parkList" :key="item.id">
            <div class="cursor-pointer" @click="handleParkItemClick(item)">
              <div>
                <img
                  class="w-full rounded-t-md"
                  style="height: 248px"
                  :src="getValue(item, 'imgList')"
                />
              </div>
              <div class="p-5">
                <div class="text-xl text-index-title truncate mb-2">
                  {{ getValue(item, 'name') }}
                </div>
                <div class="text-sm text-index-desc truncate mb-4">
                  <i class="el-icon-location-outline"></i>
                  {{ getValue(item, 'addrs') }}
                </div>
                <div class="space-x-2">
                  <el-tag size="mini">{{ getValue(item, 'levelLabel') }}</el-tag>
                  <el-tag size="mini">{{ getValue(item, 'typeLabel') }}</el-tag>
                  <el-tag v-if="getValue(item, 'economicTypeLabel')" size="mini">{{
                    getValue(item, 'economicTypeLabel')
                  }}</el-tag>
                </div>
              </div>
            </div>
          </PlainCard>
        </div>
      </template>
    </ContentWrap>

    <ContentWrap class="mt-10" title="推荐载体">
      <template #subtitle>
        <div class="flex justify-center relative">
          <div>园区载体，价值优、云选址</div>
          <!-- <TextTabs v-model="resourceType" :options="resourceOptions"></TextTabs> -->
          <div class="absolute right-0">
            <ReadMore to="/resource"></ReadMore>
          </div>
        </div>
      </template>
      <template #default>
        <div class="grid grid-cols-4 gap-x-5">
          <PlainCard v-for="item in landList" :key="item.id">
            <div @click="handleLandItemClick(item)">
              <div>
                <img
                  class="w-full rounded-t-md"
                  style="height: 190px"
                  :src="getValue(item, 'imgList')"
                />
              </div>
              <div class="p-5">
                <div class="text-xl text-index-title truncate mb-2">
                  {{ getValue(item, 'name') }}
                </div>
                <div class="text-sm text-index-desc truncate mb-4">
                  <i class="el-icon-location-outline"></i>
                  {{ getValue(item, 'addrs') }}
                </div>
                <div class="text-sm">
                  租金:
                  <span style="color: #fa6400"
                    ><span class="text-lg">{{ getValue(item, 'price') }}</span
                    >元/平米</span
                  >
                </div>
              </div>
            </div>
          </PlainCard>
        </div>
      </template>
    </ContentWrap>

    <ContentWrap class="mt-10" title="优选项目">
      <template #subtitle>
        <div class="flex justify-center relative">
          <div>招商项目，商机大、会投资</div>
          <!-- <TextTabs v-model="projectType" :options="projectOptions"></TextTabs> -->
          <div class="absolute right-0">
            <ReadMore></ReadMore>
          </div>
        </div>
      </template>
      <template #default>
        <div class="grid grid-cols-4 gap-x-5">
          <PlainCard v-for="item in projectList" :key="item.id">
            <div class="p-5" @click="handleProjectItemClick(item)">
              <div class="text-xl text-index-title truncate mb-2">{{ getValue(item, 'name') }}</div>
              <div class="space-x-2 mb-4">
                <el-tag size="mini">{{ getValue(item, 'typeLabel') }}</el-tag>
                <el-tag size="mini">{{ getValue(item, 'statusLabel') }}</el-tag>
              </div>
              <div class="text-sm text-index-desc truncate mb-4 space-y-1">
                <div>
                  <span>总投资额：</span>
                  <span style="color: #ffa800">{{ getValue(item, 'investment') }}万</span>
                </div>
                <div class="flex items-center">
                  <span>项目需求：</span>
                  <span class="truncate inline-block">{{ getValue(item, 'needs') }}</span>
                </div>
                <div class="flex items-center">
                  <span>所属地区：</span>
                  <span class="truncate inline-block">{{ getValue(item, 'addrs') }}</span>
                </div>
                <div>
                  <span>发布时间：</span>
                  <span>{{ getValue(item, 'createdTime') }}</span>
                </div>
              </div>
              <div class="flex justify-center">
                <el-button size="small" type="primary">查看详情</el-button>
              </div>
              <!-- <div class="text-sm">
                租金:
                <span style="color: #fa6400"><span class="text-lg">50</span>元/平米</span>
              </div> -->
            </div>
          </PlainCard>
        </div>
      </template>
    </ContentWrap>
  </div>
</template>

<script lang="ts">
import Vue from 'vue'
import ContentWrap from './ContentWrap.vue'
// import TextTabs from './TextTabs.vue'
import ReadMore from './ReadMore.vue'
import PlainCard from './card/PlainCard.vue'
import { getParkPageList } from '@/api/park'
import { getLandPageList, getProjectPageList } from '@/api/resource'
import defaultParkImg from '@/assets/img/index/demo1.png'
export default Vue.extend({
  components: { ContentWrap, ReadMore, PlainCard },
  data() {
    return {
      parkType: 0, // all
      parkOptions: [
        {
          label: '全部',
          value: 0,
        },
        {
          label: '工业园区',
          value: 1,
        },
        {
          label: '农业园区',
          value: 2,
        },
        {
          label: '旅游园区',
          value: 3,
        },
        {
          label: '商业园区',
          value: 4,
        },
        {
          label: '文创园区',
          value: 5,
        },
        {
          label: 'IT产业园',
          value: 6,
        },
        {
          label: '动漫产业园',
          value: 7,
        },
        {
          label: '影视产业园',
          value: 8,
        },
      ],
      resourceType: 0,
      resourceOptions: [
        {
          label: '土地',
          value: 0,
        },
        {
          label: '厂房',
          value: 1,
        },
        {
          label: '写字楼',
          value: 2,
        },
        {
          label: '仓库',
          value: 3,
        },
        {
          label: '商铺',
          value: 4,
        },
      ],
      projectType: 0,
      projectOptions: [
        {
          label: '政府招商项目',
          value: 0,
        },
        {
          label: '企业选址项目',
          value: 1,
        },
      ],
      parkList: [],
      landList: [],
      projectList: [],
    }
  },
  mounted() {
    this.fetchData()
  },
  methods: {
    handleParkItemClick(item) {
      this.$router.push(`/park/detail/${item.id}`)
    },
    handleLandItemClick(item) {
      this.$router.push(`/resource/detail/land/${item.id}`)
    },
    handleProjectItemClick(item) {
      this.$router.push(`/project/detail/${item.id}`)
    },
    getValue(item, key) {
      if (key === 'imgList') {
        return (
          (item.data?.imgList && item.data?.imgList[0] && item.data?.imgList[0].url) ||
          defaultParkImg
        )
      }
      if (key === 'createdTime') {
        return item.createdTime.substr(0, 10)
      }
      return (item.data && item.data[key]) || '--'
    },
    fetchData() {
      this.getParkList()
      this.getLandList()
      this.getProjectList()
    },
    async getProjectList() {
      const params = {
        conditions: {},
        pageInfo: {
          pageNum: 1,
          pageSize: 4,
        },
        sort: { 'data.sort': -1 },
      }

      const result = await getProjectPageList(params)
      this.projectList = result.list
    },
    async getLandList() {
      const params = {
        conditions: {},
        pageInfo: {
          pageNum: 1,
          pageSize: 4,
        },
        sort: { 'data.sort': -1 },
      }

      const result = await getLandPageList(params)
      this.landList = result.list
    },
    async getParkList() {
      const params = {
        conditions: {},
        pageInfo: {
          pageNum: 1,
          pageSize: 8,
        },
        sort: { 'data.sort': -1 },
      }

      const result = await getParkPageList(params)
      this.parkList = result.list
    },
  },
})
</script>

<style lang="scss" scoped></style>
